import {Button, Col, Row} from "antd";
import {ModalForm, ProFormSelect, ProFormText} from "@ant-design/pro-components";
import {ProFormTreeSelect} from "@ant-design/pro-form";
import {treeMenu} from "@/pages/system/menu/api";
import {DiffOutlined, EditOutlined} from "@ant-design/icons";
import React from "react";

interface IMenuEdit {
  isAdd: boolean;
  menu?: API.IMenu;
  triggerButton?: React.ReactElement;
  onSubmit: (values: API.IMenu) => Promise<boolean>;
  parentId?: number | string;
}

const MenuEdit: React.FC<IMenuEdit> = ({
                                         isAdd, menu, triggerButton,
                                         onSubmit, parentId
                                       }) => {

  return (
    <ModalForm
      title={isAdd ? '新增菜单' : '编辑菜单'}
      initialValues={menu}
      onFinish={async (values: API.IMenu) => {
        await onSubmit?.(values);
        return true;
      }}
      autoFocusFirstInput
      trigger={triggerButton ? triggerButton : isAdd ? <Button type="primary" icon={<DiffOutlined/>}> 新增权限</Button>
        : <Button icon={<EditOutlined/>}> 编辑权限</Button>}
      modalProps={{destroyOnClose: true}}
    >
      <Row>
        <Col span={24}>
          <ProFormTreeSelect
            name="parentId"
            placeholder="请选择上级菜单"
            allowClear
            secondary
            initialValue={parentId ? parentId : menu?.parentId}
            label={'上级菜单'}
            style={{width: '100%'}}
            request={async () => {
              const {data} = await treeMenu('', 0)
              return data
            }}
            fieldProps={{
              suffixIcon: null,
              filterTreeNode: true,
              showSearch: true,
              treeNodeFilterProp: 'title',
              popupMatchSelectWidth: true,
              fieldNames: {
                label: 'name',
                value: 'id',
              },
            }}
            rules={[{required: true, message: '请选择上级菜单'}]}
          />
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={12}>
          <ProFormText name="name" label="名称" placeholder="请输入名称"/>
        </Col>
        <Col span={12}>
          <ProFormSelect
            name="menuType"
            label="菜单类型"
            initialValue={menu?.menuType ?? 'F'}
            valueEnum={{"M": "目录", "C": "菜单", "F": "按钮"}}
          />
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={12}>
          <ProFormText name="perms" label="权限" placeholder="请输入权限"/>
        </Col>
        <Col span={12}>
          <ProFormText name="path" label="路径" placeholder="请输入路径"/>
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={12}>
          <ProFormText name="component" label="组件" placeholder="请输入组件路径"/>
        </Col>
        <Col span={12}>
          <ProFormSelect
            name="status"
            label="状态"
            initialValue={menu?.status ?? "0"}
            valueEnum={{
              "0": {text: '正常', status: 'Success'},
              "1": {text: '停用', status: 'Error'},
            }}
          />
        </Col>
      </Row>
      <Row gutter={20}>
        <Col span={12}>
          <ProFormText
            name="routeName"
            label="路由名称"
            placeholder="请输入路由名称"
            tooltip="路由名称"
          />
        </Col>
        <Col span={12}>
          <ProFormText
            name="remark"
            label="备注"
            placeholder="请输入路由备注"
            tooltip="备注"
          />
        </Col>
      </Row>
    </ModalForm>
  );
};

export default MenuEdit;
